<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- v-model 双向绑定  原理  :value + @input  
       数据驱动视图  视图驱动数据
       Object.defineProperty vue2的数据劫持
       Proxy vue3的数据劫持


       Object.defineProperty()


  -->
  <script>
    // const o = {name: 'zs'}
    // o.name = 'lisi'
    // Object.defineProperty() 在一个对象上定义一个新属性，或修改其现有属性，并返回此对象
    // Object.defineProperty(对象, 新增/修改的属性, {配置对象})
    const obj = { age: 18 }
    // Object.defineProperty(obj, 'name', {
    //   value: '张三', // 属性的值
    //   enumerable: true, // 属性可以被枚举(遍历)
    //   writable: true ,// 属性可以被重新修改
    //   configurable: true
    // })
    // obj.age = 100
    // obj.name = 'lisi'
    // delete obj.age
    // delete obj.name
    // console.log(obj)
    // for(k in obj) {
    //   console.log(k)
    // }


    Object.defineProperty(obj, 'name', {
       get(){
        return 'zhangsan' // get的返回值是name的值
       },
       set(val){ // set函数是 属性值被修改后会触发
        console.log('set触发了', val)
       }
    })
    // console.log(obj)
    obj.name = 'zs'
  </script>
</body>
</html>